<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>捷库直播助手</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            color: #969b9d;
            size: 14px;
            line-height: 1.6;
            font-family: NotoSansHans-Regular, AvenirNext-Regular, proxima-nova, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Open Sans", "Helvetica Neue", Arial, sans-serif;
        }

        *,
        :after,
        :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .margin-bottom-20 {
            margin-bottom: 20px;
        }

        .row-fluid {
            position: relative;
            z-index: 8;
        }

        #header {
            background: url('https://static.pgyer.com/static/images/template/colorful/top_bg_middle.png') no-repeat scroll top center;
            /*background-size:100% auto;*/
            height: 260px;
        }

        @media (min-width: 1200px) {
            #header {
                background: url('https://static.pgyer.com/static/images/template/colorful/top_bg.png') no-repeat scroll top center;
                height: 300px;
            }

            .qrcode {
                margin-top: 0px;
                margin-bottom: 0px;
            }
        }

        @media (max-width: 770px) {
            #header {
                background: url('https://static.pgyer.com/static/images/template/colorful/top_bg_mobile.png') no-repeat scroll top center;
                /*background-size:100% auto;*/
                height: 200px;
            }

        }

        @media screen and (-webkit-min-device-pixel-ratio: 2),
        screen and (max--moz-device-pixel-ratio: 2) {
            #header {
                background: url('https://static.pgyer.com/static/images/template/colorful/top_bg_mobile_ratio.png') no-repeat scroll top center;
                background-size: 100% auto;
                height: 200px;
            }
        }

        #appicon-bg {
            background: url(https://static.pgyer.com/static/images/template/colorful/app_bg.png) no-repeat scroll top center;
            width: 160px;
            height: 160px;
            background-size: 100% auto;
            border: none;
            background-color: #ffffff;
            margin: auto;
            margin-top: -150px;
            margin-bottom: 30px;
            text-align: center;
        }

        .appicon {
            border: none;
            width: 100px;
            height: 100px;
            margin-top: 34px;
            border-radius: 24px;
        }

        a {
            background: 0 0;
        }

        a {
            color: #1abc9c;
            text-decoration: none;
        }

        a,
        a:active,
        a:focus,
        a:hover {
            outline: 0 !important;
        }

        .btn-u,
        .list-toggle:after {
            font-size: 14px;
            font-weight: 400;
            display: inline-block;
        }

        .btn-u,
        .btn-u:hover {
            color: #fff;
            text-decoration: none;
        }

        .btn-u {
            border: 1px solid #ef4047;
            cursor: pointer;
            padding: 4px 13px;
            position: relative;
        }

        .btn-u {
            background: #ef4047;
        }

        .btn-u-lg,
        a.btn-u-lg {
            font-size: 18px;
            padding: 10px 25px;
        }

        .btn-u-lg,
        a.btn-u-lg {
            font-size: 18px;
            padding: 8px 60px;
            background-color: #ef4047;
            border-radius: 30px;
        }

        .btn-w {
            margin: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="row-fluid  margin-bottom-20" style="z-index:-2;">
        <div id="header"></div>
    </div>
    <div class="container content">


        <div class="view row">
            <div class="span12 margin-bottom-30 " id="appicon-bg">
                <img src="https://gitee.com/tim_zhang/gikooipa/raw/master/icon512.png" class="appicon">
            </div>
            <div class="span12" style="text-align:center;padding-top:10px;">
                <h2 style="color:#333;size:24px;margin-bottom: -5px;">
                    捷库直播助手 </h2>
            </div>
        </div>
        <div class="btn-w">
            <a href="itms-services://?action=download-manifest&url=https://gitee.com/tim_zhang/gikooipa/raw/master/manifest.plist"
                id="down_load" class="btn-u btn-u-lg">
                点击安装
            </a>
        </div>
    </div>
</body>

</html>